<template>
    <div class="cart_item">
      <div class="cart_column column_1">
        <el-checkbox class="my_el_checkbox" v-model="courseData.selected"></el-checkbox>
      </div>
      <div class="cart_column column_2">
        <img :src="courseData.course_img" alt="">
        <span><router-link :to="'/course/detail/'+ courseData.id +'/'">{{courseData.name}}</router-link></span>
      </div>

      <div class="cart_column column_3">
        <el-select v-model="courseData.expire" size="mini" placeholder="请选择购买有效期" class="my_el_select">
          <el-option :label="expire_value.expire_text" :value="expire_value.id" :key="expire_index" v-for="(expire_value,expire_index) in courseData.expire_list"></el-option>
        </el-select>
      </div>
      <div class="cart_column column_4">¥{{courseData.real_price}}</div>
      <div style="cursor: pointer;" class="cart_column column_4" @click="del">删除</div>
    </div>
</template>

<script>
export default {
    name: "CartItem",
    data(){
      return {
        // checked:false,
        // expire: "30",
      }
    },
    props: ['courseData', ],
    watch:{

      //  切换有效期来动态修改后台redis中存储的客户曾有效期
      "courseData.expire":function(){
        let token = sessionStorage.token || localStorage.token;
        this.$axios.put(`${this.$settings.host}/cart/list/`,{
          course_id: this.courseData.id,
          expire_id: this.courseData.expire,
        },{
                    headers:{
            'authorization': `jwt ${token}`,
          }
        }).then((res)=>{
          this.$message.success(res.data.msg);
          this.courseData.real_price = res.data.real_price;
          this.$emit('fathercal')
        }).catch((error)=>{
          this.$message.error(error.response.data.error);
        })
      },

      "courseData.selected":function (){
        let token = sessionStorage.token || localStorage.token;
        this.$axios.patch(`${this.$settings.host}/cart/list/`,{
          course_id: this.courseData.id,
          selected:this.courseData.selected,

        },{
          headers:{
            'authorization': `jwt ${token}`,
          }
        }).then((res)=>{
          this.$message.success('切换勾选状态成功！');
          this.$emit('fathercal');
        }).catch((error)=>{

        })

      }
    },
    methods:{
      del(){
        let token = sessionStorage.token || localStorage.token;
        this.$axios.delete(`${this.$settings.host}/cart/list/`,{
          params:{
            course_id:this.courseData.id,
          },
          headers:{
            'authorization': `jwt ${token}`,
          }
        }).then((res)=>{
          this.$store.commit('add_cart',res.data.cart_len);
          // console.log(res.data.cart_len);
          sessionStorage.setItem('cart_length',this.$store.state.cart.cart_length);
          this.$message.success('删除成功，记得再回来买');
          // 前端数据也要对应删除
          this.$emit('fatherdel');
          this.$emit('fathercal')
        }).catch((error)=>{

        })
      }
    }
}
</script>

<style scoped>
  /*.cart_item{*/
  /*  height: 100px;*/
  /*}*/
.cart_item::after{
  content: "";
  display: block;
  clear: both;
}
.cart_column{
  float: left;
  height: 150px;
  display: flex;
  align-items: center;
}
.cart_item .column_1{
  width: 88px;
  position: relative;
}
.my_el_checkbox{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.cart_item .column_2 {
  /*padding: 67px 10px;*/
  width: 520px;
  /*height: 116px;*/
}
.cart_item .column_2 img{
  width: 175px;
  /*height: 115px;*/
  margin-right: 35px;
  /*vertical-align: middle;*/
}
.cart_item .column_3{
  width: 197px;
  position: relative;
  padding-left: 10px;
}
.my_el_select{
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.cart_item .column_4{
  /*padding: 67px 10px;*/
  /*height: 116px;*/
  width: 142px;
  /*line-height: 116px;*/
}

</style>
